<template>
	<view class="check">
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">手机验证</view>
				<view class="backbtn"></view>
			</view>
		</view>
		<view style="width: 100%;height: 180rpx;"></view>
		
		<view class="text acea-row row-middle row-center row-column mt-20">
			<view class="fc-888 fs-28" style="text-align: center;">
				<view>为了账号安全性，点击获取验证码，</view>
				<view class="mt-10">发送短信验证至一下手机</view>
			</view>
			<view class="phone mt-20">{{ phone | mobile}}</view>
		</view>
		
		<view class="acea-row main mt-20">
			<view>短信验证码</view>
			<view class="code">
				<textarea v-model="code" placeholder="请输入短信验证码" placeholder-style="color:#C3C4C5;font-size:30rpx;"></textarea>
				<!-- <input type="text" v-model="code" placeholder="请输入短信验证码" placeholder-style="color:#C3C4C5;"> -->
			</view>
			<view class="fill-line"></view>
			<view class="huoqu" @click="getcode" v-if="sec==0">
				<text>获取验证码</text>
			</view>
			<view class="secde" v-else>{{sec}}秒后重发</view>
		</view>
		
		<view class="submit" :class="code ?'on':''" @click="again">下一步</view>
		
	</view>
</template>

<script>
	export default {
		filters:{
			mobile(val){
				var reg = /^(\d{3})\d{4}(\d{4})$/;  
				return val.replace(reg, "$1****$2");
			}
		},
		data() {
			return {
				code: '',
				sec: '',
				phone:'',
			};
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			again(){
				let that = this;
				uni.showLoading()
				uni.setStorageSync('islook',1)
				setTimeout(()=>{
					uni.hideLoading();
					uni.navigateBack()
					// uni.redirectTo({
					// 	url:'/pages/index/baseinfo'
					// })
				},2000)
			},
			getcode(){
				let that = this;
				that.sec = 60;
				setInterval(()=>{
					if( that.sec == 0 ) return;
					that.sec--
				},1000)
				setTimeout(()=>{
					that.code = '123456';
				},2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check{
		
		.submit{
			width: 690rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #D1E7FC;
			color: #fff;
			margin: 50rpx auto;
			border-radius: 10rpx;
			
			&.on{
				background-color: #5186E6;
			}
		}
		
		.main{
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			
			.code{
				width: 250rpx;
				margin: 0 50rpx;
				
				textarea{
					width: 220rpx;
					max-height: 80rpx;
					overflow-wrap: break-word;
				}
				input{
					width: 100%;
					overflow-wrap: break-word;
				}
			}
			.fill-line{
				width: 2rpx;
				height: 35rpx;
				background-color: #ADAEB0;
				margin-top: 5rpx;
			}
			.huoqu{
				color: #5186E6;
				padding: 0 30rpx;
			}
			.secde{
				color: #999;
				padding: 0 30rpx;
			}
			
		}
		
		.text{
			width: 100%;
			padding: 60rpx;
			background-color: #fff;
			
			.phone{
				font-size: 50rpx;
				font-weight: 500;
			}
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
		
	}
</style>
